<template>
   
        <div ref="annularEcharts" class="annularEcharts"></div>
    
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import * as echarts from 'echarts'
const annularEcharts=ref(null)
onMounted(()=>{
    drawLine()
})
const drawLine=()=>{
    const chart=echarts.init(annularEcharts.value)

    const option = {
        title: [
          {
            text: '标题',
            subtext: '副标题',
            left: '25%',
            top: '12%',
            textAlign: 'left',
            textStyle: {
              color: '#F7B36A',
              fontSize: 14
            },
            subtextStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            text: '标题',
            subtext: '副标题',
            left: '58%',
            top: '12%',
            textAlign: 'left',
            textStyle: {
              color: '#018EBB',
              fontSize: 14
            },
            subtextStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            text: '标题',
            subtext: '副标题',
            left: '88%',
            top: '12%',
            textAlign: 'left',
            textStyle: {
              color: '#5464C6',
              fontSize: 14
            },
            subtextStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            text: '标题',
            subtext: '副标题',
            left: '25%',
            top: '52%',
            textAlign: 'left',
            textStyle: {
              color: '#FF755F',
              fontSize: 14
            },
            subtextStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            text: '标题',
            subtext: '副标题',
            left: '58%',
            top: '52%',
            textAlign: 'left',
            textStyle: {
              color: '#00A9A6',
              fontSize: 14
            },
            subtextStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        ],
        series: [
          {
            tooltip: {
              trigger: 'item'
            },
            type: 'pie',
            startAngle: 90,
            hoverAnimation: false,
            radius: ['20%', '25%'],
            center: ['15%', '25%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#ccc',
                formatter: (params:any) => {
                  return params.value
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 50,
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0.1)'
                  }
                }
              },
              {
                value: 40,
                name: 'type',
                itemStyle: {
                  normal: {
                    color: '#F7B36A'
                  }
                }
              }
            ]
          },
          {
            type: 'pie',
            startAngle: 90,
            hoverAnimation: false,
            radius: ['20%', '25%'],
            center: ['48%', '25%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#ccc',
                formatter: (params:any) => {
                  return params.value
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 60,
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0.1)'
                  }
                }
              },
              {
                value: 40,
                itemStyle: {
                  normal: {
                    color: '#018EBB'
                  }
                }
              }
            ]
          },
          {
            type: 'pie',
            startAngle: 90,
            hoverAnimation: false,
            radius: ['20%', '25%'],
            center: ['80%', '25%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#ccc',
                formatter: (params:any) => {
                  return params.value
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 44,
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0.1)'
                  }
                }
              },
              {
                value: 120,
                itemStyle: {
                  normal: {
                    color: '#5464C6'
                  }
                }
              }
            ]
          },
          {
            type: 'pie',
            startAngle: 90,
            hoverAnimation: false,
            radius: ['20%', '25%'],
            center: ['15%', '65%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#ccc',
                formatter: (params:any) => {
                  return params.value
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 70,
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0.1)'
                  }
                }
              },
              {
                value: 80,
                itemStyle: {
                  normal: {
                    color: '#FF755F'
                  }
                }
              }
            ]
          },
          {
            type: 'pie',
            startAngle: 90,
            hoverAnimation: false,
            radius: ['20%', '25%'],
            center: ['48%', '65%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#ccc',
                formatter: (params:any) => {
                  return params.value
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 90,
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0.1)'
                  }
                }
              },
              {
                value: 55,
                itemStyle: {
                  normal: {
                    color: '#00A9A6'
                  }
                }
              }
            ]
          }
        ]
      }
      chart.setOption(option)
      window.addEventListener('resize',()=>{
        chart.resize()
      })
      
}
</script>

<style scoped>
.annularEcharts{
    width:100%;
    height:100%;
}
</style>